<template>
  <div class="home">
    <div class="module-box">
      <van-grid :column-num="3">
        <van-grid-item v-for="(item, index) in icons" class="my-grid-item">
          <i :class="item.icon"></i>
          <p>{{ item.text }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="mysong">
      <div class="title">
        <p>我的歌单</p>
        <i class="iconfont icon-chilun"></i>
      </div>
      <div class="songlist">
        <div class="list-item" v-for="(item, index) in songList" :key="item.id">
          <div class="img-box">
            <img :src="item.coverImgUrl" :alt="item.name" />
          </div>
          <div class="content">
            <div class="content-title">{{ item.name }}</div>
            <div class="describe">
              {{ item.trackCount }}首, by {{ item.creator.nickname }},已播放{{
                item.playCount
              }}次
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { iconSetting } from './options/icon.js';
import { ref, onMounted, defineComponent } from 'vue';
import { getUserInfo, getUserSongList } from '@/api/home.js';
export default defineComponent({
  setup() {
    const songList = ref([]);
    const userInfo = ref({});
    const icons = ref(iconSetting);
    const uid = localStorage.getItem('uid') || '';
    const getInfo = async (params: Object) => {
      let res = await getUserInfo(params);
      // console.log(res);
      userInfo.value = res.data;
    };
    const getSongList = async (params: Object) => {
      let res = await getUserSongList(params);
      console.log(res);
      songList.value = res.data.playlist;
    };
    onMounted(() => {
      // console.log(iconSetting);
      getInfo({});
      getSongList({ uid: uid });
    });
    return {
      songList,
      icons,
    };
  },
});
</script>

<style lang="scss" scoped>
.my-grid-item {
  i {
    font-size: 0.6rem;
    margin-bottom: 0.2rem;
    color: $wyy-red;
  }
  p {
  }
}

.mysong {
  .title {
    height: 0.7rem;
    line-height: 0.7rem;
    background: #f0f0f0;
    display: flex;
    justify-content: space-between;
    p {
      margin-left: 0.3rem;
    }
    i {
      margin-right: 0.3rem;
    }
  }
  .songlist {
    .list-item {
      height: 1.7rem;
      // background-color: red;
      display: flex;
      .img-box {
        width: 2.2rem;
        height: 100%;
        padding: 0.2rem 0.4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0.1rem 0;
        border-bottom: 2px solid rgba(245, 245, 245, 4);
        .content-title {
          font-family: '微软雅黑';
        }
        .describe {
          color: rgb(94, 94, 94);
          font-size: 0.2rem;
        }
      }
    }
  }
}
</style>
